<script setup lang="ts">
import { Graph, Node } from '@antv/x6'
import library from '../library'
import imageLibrary from '../library/images'
import { Dnd } from '@antv/x6-plugin-dnd'
import { useYkEditorDrawStore } from '../store'

const store = useYkEditorDrawStore()

onMounted(() => {
  // ---
})

// region TODO 初始化
const stopInitWatch = watch(() => store.graph, () => {
  initDnd()
  stopInitWatch()
})
// endregion

const openedList = ref(new Set())
function collapseChangeHandle (activeNames: string[]) {
  openedList.value = new Set(Array.from(openedList.value).concat(activeNames))
}

// region TODO Dnd
const dnd = ref<Dnd>()
function initDnd () {
  dnd.value = new Dnd({ target: store.graph as Graph })
}
// endregion

// region TODO 拖拽
function startDrag (event: MouseEvent, config: Node.Metadata) {
  if (dnd.value) {
    const node = store.graph.createNode(config)
    store.graph.createNode(config)
    dnd.value.start(node, event)
  }
}
// endregion

// region TODO 选中
const activeNames = ref(['basic', 'basicTuples'])

// endregion
</script>

<template>
  <div class="h-100 addon-bar">
    <el-tabs type="border-card">
      <el-tab-pane label="组件库">
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(group, name) in library" :key="name" :title="group.title" :name="name">
            <div class="d-flex flex-wrap">
              <div v-for="(item, index) in group.children" :key="index" class="dnd-item" @mousedown="startDrag($event, item.config)">
                <img :src="item.icon" class="dnd-icon" alt="">
                <div :title="item.describe" class="dnd-name">{{ item.title }}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="图片库">
        <el-collapse @change="collapseChangeHandle">
          <el-collapse-item v-for="(group, key) in imageLibrary" :key="key" :name="key" :title="group.title">
            <div v-if="openedList.has(key)" class="d-flex flex-wrap">
              <img
                v-for="(item, index) in group.children" :key="index" :src="item.config.attrs.image.href"
                :title="item.title" class="mb-2 image-item" alt=""
                @mousedown="startDrag($event, item.config)"
              >
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.addon-bar {
  width: 240px;
  background-color: white;
  box-shadow: 3px 0 6px 0 rgba(119, 119, 119, 0.2);
  position: relative;

  ::v-deep(.el-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-tabs__content {
      overflow: auto;
    }
  }

  .dnd-item {
    width: 50px;height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    &:hover {
      border-color: var(--el-color-primary);
    }
    .dnd-icon {
      object-fit: contain;
      width: 30px;height: 30px;
    }
    .dnd-name {
      font-size: 12px;
      line-height: 20px;
      color: var(--el-text-color-secondary);
    }
  }

  .image-item {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 8px;
    cursor: pointer;
  }
}
</style>
